<template>
	<view class="container">
		<view class="content">
			<!-- 时间显示 -->
			<view class="time-section">
				<view class="current-time">{{ currentTime }}</view>
				<view class="current-date">{{ currentDate }}</view>
			</view>

			<!-- 打卡状态 -->
			<view class="clock-status">
				<view class="status-card">
					<view class="status-title">今日打卡状态</view>
					<view class="status-content">
						<view class="status-item">
							<text class="status-label">上班时间</text>
							<text class="status-value" :class="{ 'late': isLate }">{{ clockInTime || '未打卡' }}</text>
						</view>
						<view class="status-item">
							<text class="status-label">下班时间</text>
							<text class="status-value">{{ clockOutTime || '未打卡' }}</text>
						</view>
						<view class="status-item">
							<text class="status-label">工作时长</text>
							<text class="status-value">{{ workDuration || '0小时' }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 位置信息 -->
			<view class="location-section">
				<view class="location-card">
					<view class="location-header">
						<image src="/static/location.png" class="location-icon" />
						<text class="location-title">打卡位置</text>
					</view>
					<view class="location-content">
						<text class="location-address">{{ locationAddress }}</text>
						<text class="location-distance">{{ locationDistance }}</text>
					</view>
				</view>
			</view>

			<!-- 打卡按钮 -->
			<view class="clock-actions">
				<view class="clock-btn clock-in-btn" :class="{ 'disabled': isClockInDisabled }" @click="handleClockIn">
					<text class="btn-text">上班打卡</text>
				</view>
				<view class="clock-btn clock-out-btn" :class="{ 'disabled': isClockOutDisabled }" @click="handleClockOut">
					<text class="btn-text">下班打卡</text>
				</view>
			</view>

			<!-- 打卡记录 -->
			<view class="clock-history">
				<view class="history-header">
					<text class="history-title">今日打卡记录</text>
				</view>
				<view class="history-list">
					<view v-for="(record, index) in clockRecords" :key="index" class="history-item">
						<view class="record-time">
							<text class="record-hour">{{ record.time }}</text>
							<text class="record-type">{{ record.type }}</text>
						</view>
						<view class="record-location">
							<text class="record-address">{{ record.location }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 响应式数据
const currentTime = ref('');
const currentDate = ref('');
const clockInTime = ref('');
const clockOutTime = ref('');
const workDuration = ref('');
const locationAddress = ref('正在获取位置...');
const locationDistance = ref('');
const isLate = ref(false);
const isClockInDisabled = ref(false);
const isClockOutDisabled = ref(true);
const clockRecords = ref([]);

let timeInterval = null;

// 获取当前时间
const updateTime = () => {
	const now = new Date();
	const hours = String(now.getHours()).padStart(2, '0');
	const minutes = String(now.getMinutes()).padStart(2, '0');
	const seconds = String(now.getSeconds()).padStart(2, '0');
	
	currentTime.value = `${hours}:${minutes}:${seconds}`;
	
	const year = now.getFullYear();
	const month = String(now.getMonth() + 1).padStart(2, '0');
	const date = String(now.getDate()).padStart(2, '0');
	const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
	const weekday = weekdays[now.getDay()];
	
	currentDate.value = `${year}年${month}月${date}日 星期${weekday}`;
};

// 获取位置信息
const getLocation = () => {
	uni.getLocation({
		type: 'gcj02',
		success: (res) => {
			locationAddress.value = '公司地址（示例）';
			locationDistance.value = '距离公司 50米';
		},
		fail: (err) => {
			locationAddress.value = '位置获取失败';
			locationDistance.value = '';
		}
	});
};

// 上班打卡
const handleClockIn = () => {
	if (isClockInDisabled.value) return;
	
	const now = new Date();
	const timeString = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
	
	// 检查是否迟到（假设上班时间为9:00）
	const workStartTime = new Date();
	workStartTime.setHours(9, 0, 0, 0);
	
	if (now > workStartTime) {
		isLate.value = true;
		uni.showToast({
			title: '已迟到',
			icon: 'none'
		});
	} else {
		uni.showToast({
			title: '打卡成功',
			icon: 'success'
		});
	}
	
	clockInTime.value = timeString;
	isClockInDisabled.value = true;
	isClockOutDisabled.value = false;
	
	// 添加打卡记录
	clockRecords.value.unshift({
		time: timeString,
		type: '上班打卡',
		location: locationAddress.value
	});
	
	// 模拟API调用
	submitClockRecord('clockIn', timeString);
};

// 下班打卡
const handleClockOut = () => {
	if (isClockOutDisabled.value) return;
	
	const now = new Date();
	const timeString = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
	
	clockOutTime.value = timeString;
	isClockOutDisabled.value = true;
	
	// 计算工作时长
	if (clockInTime.value) {
		const clockIn = new Date();
		const [inHour, inMinute] = clockInTime.value.split(':');
		clockIn.setHours(parseInt(inHour), parseInt(inMinute), 0, 0);
		
		const duration = now - clockIn;
		const hours = Math.floor(duration / (1000 * 60 * 60));
		const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
		workDuration.value = `${hours}小时${minutes}分钟`;
	}
	
	// 添加打卡记录
	clockRecords.value.unshift({
		time: timeString,
		type: '下班打卡',
		location: locationAddress.value
	});
	
	uni.showToast({
		title: '打卡成功',
		icon: 'success'
	});
	
	// 模拟API调用
	submitClockRecord('clockOut', timeString);
};

// 提交打卡记录到服务器
const submitClockRecord = (type, time) => {
	// 这里应该调用实际的API
	console.log('提交打卡记录:', { type, time, location: locationAddress.value });
	
	// 模拟API调用
	uni.request({
		url: '/api/clock/record',
		method: 'POST',
		data: {
			type,
			time,
			location: locationAddress.value,
			latitude: 0,
			longitude: 0
		},
		success: (res) => {
			console.log('打卡记录提交成功:', res);
		},
		fail: (err) => {
			console.error('打卡记录提交失败:', err);
		}
	});
};

// 组件挂载时
onMounted(() => {
	updateTime();
	getLocation();
	
	// 启动时间更新定时器
	timeInterval = setInterval(updateTime, 1000);
	
	// 检查今日是否已打卡
	checkTodayClockStatus();
});

// 组件卸载时
onUnmounted(() => {
	if (timeInterval) {
		clearInterval(timeInterval);
	}
});

// 检查今日打卡状态
const checkTodayClockStatus = () => {
	// 模拟从服务器获取今日打卡状态
	// 这里应该调用实际的API
	const today = new Date().toDateString();
	
	// 模拟数据
	const mockData = {
		clockInTime: '09:15',
		clockOutTime: '',
		records: [
			{ time: '09:15', type: '上班打卡', location: '公司地址' }
		]
	};
	
	if (mockData.clockInTime) {
		clockInTime.value = mockData.clockInTime;
		isClockInDisabled.value = true;
		isClockOutDisabled.value = false;
		clockRecords.value = mockData.records;
		
		// 检查是否迟到
		const clockInTime = new Date();
		const [hour, minute] = mockData.clockInTime.split(':');
		clockInTime.setHours(parseInt(hour), parseInt(minute), 0, 0);
		
		const workStartTime = new Date();
		workStartTime.setHours(9, 0, 0, 0);
		
		if (clockInTime > workStartTime) {
			isLate.value = true;
		}
	}
};
</script>

<style scoped>
.container {
	background: linear-gradient(to bottom, #93D2F3 10%, #EFEFEF 60%);
	min-height: 1200rpx;
	padding: 30rpx 30rpx 240rpx 30rpx;
}

/* 时间显示 */
.time-section {
	text-align: center;
	margin-bottom: 40rpx;
}

.current-time {
	font-size: 80rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.current-date {
	font-size: 28rpx;
	color: #666;
}

/* 打卡状态 */
.clock-status {
	margin-bottom: 30rpx;
}

.status-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.status-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.status-content {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.status-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.status-label {
	font-size: 28rpx;
	color: #666;
}

.status-value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.status-value.late {
	color: #e43d33;
}

/* 位置信息 */
.location-section {
	margin-bottom: 30rpx;
}

.location-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.location-header {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.location-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.location-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.location-content {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.location-address {
	font-size: 28rpx;
	color: #333;
}

.location-distance {
	font-size: 24rpx;
	color: #666;
}

/* 打卡按钮 */
.clock-actions {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.clock-btn {
	flex: 1;
	height: 120rpx;
	background: linear-gradient(135deg, #3D76FF, #5B8CFF);
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 20rpx rgba(61, 118, 255, 0.3);
}

.clock-btn.disabled {
	background: #ccc;
	box-shadow: none;
}

.clock-out-btn {
	background: linear-gradient(135deg, #FF6B35, #FF8C42);
	box-shadow: 0 4rpx 20rpx rgba(255, 107, 53, 0.3);
}

.clock-out-btn.disabled {
	background: #ccc;
	box-shadow: none;
}

.btn-icon {
	width: 40rpx;
	height: 40rpx;
	margin-bottom: 8rpx;
}

.btn-text {
	font-size:32rpx;
	color: #fff;
	font-weight: bolder;
}

/* 打卡记录 */
.clock-history {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.history-header {
	margin-bottom: 20rpx;
}

.history-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.history-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.history-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.history-item:last-child {
	border-bottom: none;
}

.record-time {
	display: flex;
	flex-direction: column;
	gap: 5rpx;
}

.record-hour {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.record-type {
	font-size: 24rpx;
	color: #666;
}

.record-location {
	flex: 1;
	margin-left: 20rpx;
}

.record-address {
	font-size: 26rpx;
	color: #666;
	text-align: right;
}
</style> 